<template>
	<!-- <view>
		<image class="bg" src="/static/login/log_bg.png" mode="scaleToFill"></image> -->
	<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">

		<view class="sticky">
			<!-- #ifdef APP-PLUS -->
			<view class="statusbox"></view>
			<!-- #endif -->
			<view class="searchWrap">
				<view class="searchBox">
					<image src="/static/index/icon_search.png" mode="scaleToFill" class="icon"></image>
					<input type="text" class="search_input" v-model="search_name" @confirm="onInput"
						placeholder="搜索商品关键词" placeholder-class="color-6">
				</view>
			</view>
			<!-- <view class="tabWrap">
				<template v-for="(item, index) in typeList">
					<view class="item" :key="index" :class="{'typeAcitve':typeIndex == index}" @tap="typeChange(index)">{{item.name}}</view>
				</template>
			</view> -->
			<scroll-view class="scrollWrap" scroll-x="true" scroll-with-animation="true">
				<view class="list">
					<template v-if="ktheme == 'black'">
						<view class="item" :class="{'selected':typeIndex2 == -1}" @click="typeChange2()">全部</view>
						<template v-for="(item, index) in typeList">
							<view class="item" :class="{'selected':typeIndex2 == index}" :key="index"
								@tap="on_tab_click(index)">
								{{item.name}}
							</view>
						</template>
					</template>
					<template v-else>
						<view class="item" :class="{'selected_more':typeIndex2 == -1}" @click="typeChange2()">全部</view>
						<template v-for="(item, index) in typeList">
							<view class="item" :class="{'selected_more':typeIndex2 == index}" :key="index"
								@tap="on_tab_click(index)">
								{{item.name}}
							</view>
						</template>
					</template>
				</view>
			</scroll-view>
			<view class="workTime">
				<view class="workContainer" :style="{'border':kborderSty}">
					<view class="title" :style="{background:kbuttonBgColor}">
						<text :style="{'color':ktabNormalColor}">开市时间：</text>
					</view>
					<view class="subtitle">
						<view :style="{'color':kselectColorSize}">
						<text v-if="tradelist.openType==1">全年</text>
						<text v-else>工作日</text>
						{{tradelist.openTime}}-{{tradelist.closeTime}}
						</view>
					</view>
					<view class="answer" @click="pushIssue()">
						<image src="@/static/user/wenhao.png"></image>
					</view>
				</view>
			</view>
			<!-- <view class="filter_box">
				<view class="filter_item" @tap="set_time_sort()">
					最新
					<n-icon name="triangledownfill" v-if="sort=='give_time asc'" size="16" color="#999"></n-icon>
					<n-icon name="triangleupfill" v-if="sort=='give_time desc'" size="16" color="#999"></n-icon>
				</view>
				<view class="filter_item" @tap="set_price_sort()">
					价格
					<n-icon name="triangledownfill" v-if="sort=='give_price asc'" size="16" color="#999"></n-icon>
					<n-icon name="triangleupfill" v-if="sort=='give_price desc'" size="16" color="#999"></n-icon>
				</view>
			</view> -->
		</view>
		<view class="shop">
			<template v-for="(item, index) in list">
				<view class="item" :style="{'background':(ktheme == 'purple' ? '#ffffff': '#161616')}" :key="index" @tap="go_list(item)">
					<view class="cover">
						<image :src="item.image" mode="aspectFit"></image>
					</view>
					<view class="work-time" :class="ktheme == 'black' ? 'info_black' : 'info_white'">
						<text v-if="item.isOpen">已开市</text>
						<text v-if="!item.isOpen">已关市</text>
					</view>
					<view class="info" :class="ktheme == 'black' ? 'info_black' : 'info_white'">
						<view class="title">{{item.name}}</view>
						<view :class="ktheme == 'black' ? 'black-info' : 'white-info'">
							限量：{{item.quantity}}份
						</view>
						<view v-if="item.secondaryNumber && item.secondaryNumber >0"
							  :class="ktheme == 'black' ? 'black-info' : 'white-info'">
						进度标准：{{item.secondaryNumber || 0}}份	 <!-- 进度：{{item.muleNum || 0}}/{{item.secondaryNumber || 0}} -->
						</view>
						<view :class="ktheme == 'black' ? 'black-info' : 'white-info'">
						<text v-if="item.secondaryNumber==0">流通量：{{item.nftQuantity}}份</text>
						<text v-else>流通量：{{item.accessNum || 0}}份</text>
							
						</view>
						<view class="price" :class="ktheme == 'black' ? 'black-price' : 'white-price'">
							<text class="unit" :style="{color:knormalColor}">￥</text>
							<text v-if="item.saleQuantity" :style="{color:knormalColor}">{{item.minPrice|fp}}起</text>
							<text v-else :style="{color:knormalColor}">{{item.saleOutPrice|fp}}起</text>
						</view>
					</view>
					<!-- 已退市 -->
					<image class="out" src="/static/mart/mart-out.png" mode="scaleToFill" v-if="!item.saleQuantity">
				</view>
			</template>
			<view class="none" style="text-align: center;" v-if='list.length===0'>
				<image src="@/static/without.png" style="width:670rpx;margin: 10rpx auto;" alt="" mode="widthFix">
				</image>
			</view>
		</view>
		<!-- 底部导航 -->
		<tabbar></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar/tabbar.vue';

	export default {
		components: {
			tabbar
		},
		data() {
			return {
				list: [],
				page: 1,
				hasNextPage: true,
				limit: 10,

				search_name: '',
				sort: '',
				is_first: false,

				typeList: [],
				typeIndex: -1,
				typeIndex2: -1,
				is_h5ios: false,

				show: false,
				tabList: [],
				current: 0,
				tradelist:{
					openType:'',
					openTime:'',
					closeTime:''
				}
			}
		},
		computed: {
			open() {
				return this.$store.state.config.market_switch;
			}
		},
		created() {
			this.aiReloadHome()
		},
		onLoad() {
			
					
				this.aiReloadHome()
			this.getTradelist()
			let data = {}
			this.$api.getCategory(data, res => {
				if (res.status) {
					this.is_first = true;
					this.typeList = res.data;
					this.get_data_list();
				} else {
					this.$common.errorToShow('获取出错')
				}
			})
			// #ifdef H5
			//判断用户是否为ios用户
			uni.getSystemInfo({
				success: (res) => {
					if (res.osName == "ios") {
						this.is_h5ios = true;
					}
					console.log(res.osName, "版本");
					console.log(res.system, "系统");
				}
			});
			// #endif
		},
		onPullDownRefresh() {
			this.get_data_list();
			this.getTradelist()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500)
		},
		onShow() {
			let messageType = uni.getStorageSync('messageType')
			console.log("-messageType-",messageType);
			// let aiEventId = uni.getStorageSync('aiEventId')
			if(messageType == 'ai'){
				uni.navigateTo({
				url:'/pages/aipicture/aipicture?messageType='+messageType
			  	})
				uni.removeStorageSync('messageType','')
				// uni.removeStorageSync('aiEventId','')
			}
			if (this.is_first)
				this.get_data_list()
		},
		onReachBottom() {
			if (this.hasNextPage) {

				let new_page = this.page + 1;
				let data = {
					pageNo: new_page,
					q: this.search_name,
					cid: this.typeIndex2 == -1 ? '' : this.typeList[this.typeIndex2].cid,
					// order: this.sort
				}
				// let cat_id = ''
				// let cat_id_son = ''
				// if (this.typeIndex != -1) {
				// 	cat_id = this.typeList[this.typeIndex].id;
				// 	if (this.typeIndex2 != -1) {
				// 		cat_id_son = this.typeList[this.typeIndex].child[this.typeIndex2].id
				// 	}
				// }
				// data.goods_cat_son_id = cat_id_son
				// data.goods_cat_id = cat_id;
				let token = (this.$db.get('userToken'));
				if (token) data.token = token
				// this.$api.getMarketList(data, res => {
				// 	if (res.status) {
				// 		this.list = this.list.concat(res.data);
				// 		this.hasNextPage = res.data.length >= this.limit;
				// 		this.page = new_page
				// 	}
				// })
			}
		},
		methods: {
			// getChildCat(parent_id) {
			// 	this.$api.getChildCat({
			// 		parent_id: parent_id
			// 	}, res => {
			// 		if (res.status) {
			// 			this.tabList = this.tabList.concat(res.data)
			// 		} else {
			// 			this.$common.errorToShow('获取出错')
			// 		}
			// 	})
			// },
			//公告
			pushIssue() {
			 uni.navigateTo({
			 url: 'notice' 
			 //	url: 'notice?message=' + this.Tradelist.notice
			 })
			},
			getTradelist(){
				 	this.$api.getOpeningTrade(res => {
					if (res.status) {
						this.tradelist=res.data
					}
				})
			},
			go_list: function(item) {
				if(!item.isOpen){
					this.$common.errorToShow('已关市')
					return
				}
				if (item.isOut) {
					this.$common.errorToShow('商品已退市！')
					return
				} else if (this.$db.get('userToken')) {
					// 	<text v-if="item.secondaryNumber==0">流通量：{{item.nftQuantity}}份</text>
						// <text v-else>流通量：{{item.accessNum || 0}}份</text>
						var circulate;
						if(item.secondaryNumber==0){
							circulate=item.nftQuantity
						}else{
							circulate=item.accessNum
						}
					uni.navigateTo({
						url: 'item_list?id=' + item.iid+'&circulate='+circulate
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}

			},

			popup_changed: function(e) {
				console.log(e)
				if (e.show) {
					setTimeout(() => {
						this.show = e.show;
					}, 300)
				} else {
					this.show = e.show
					this.get_data_list()
				}
			},
			show_category: function() {
				this.$refs.categroy.open()
			},
			typeChange: function(id) {
				this.tabList = []
				if (this.typeIndex != id) {
					this.typeIndex2 = -1
					this.typeIndex = id;

				}
				this.current = id
				this.tabList = [...this.tabList, ...this.typeList[id].child]

				this.get_data_list()
			},
			on_tab_click(id) {
				this.typeIndex2 = id
				// if (this.typeIndex2 == id) {
				// 	this.typeIndex2 = -1
				// } else {
				// 	this.typeIndex2 = id;
				// }
				this.get_data_list()
			},
			typeChange2: function() {
				this.typeIndex2 = -1
				this.get_data_list()
			},
			confirm_cate: function() {
				this.$refs.categroy.close();
				this.get_data_list()
			},
			close: function() {
				this.$refs.categroy.close();
			},

			set_price_sort: function() {
				if (this.sort == 'give_price asc') {
					this.sort = 'give_price desc'
				} else {
					this.sort = 'give_price asc'
				}
				this.get_data_list()

			},
			set_time_sort: function() {
				if (this.sort == 'give_time desc') {
					this.sort = 'give_time asc'
				} else {
					this.sort = 'give_time desc'
				}
				this.get_data_list()
			},
			set_none_sort: function() {
				if (this.sort !== '') {
					this.sort = ''
					this.get_data_list()
				}
			},

			onInput: function(e) {
				this.get_data_list()
			},

			go_detail: function(id, lock) {
				if (lock) {
					this.$common.errorToShow('该数字科技商品正在交易中，看看别的吧')
					return;
				}
				uni.navigateTo({
					url: '/pages/mart/mart_details?id=' + id
				})
			},


			get_data_list: function() {
				this.page = 1
				this.hasNextPage = true;
				let data = {
					// pageNo: this.page,
					// limit: this.limit,
					q: this.search_name,

					cid: this.typeIndex2 == -1 ? '' : this.typeList[this.typeIndex2].cid,
					// order: this.sort

				}
				// let cat_id = ''
				// let cat_id_son = ''
				// if (this.typeIndex != -1) {
				// 	cat_id = this.typeList[this.typeIndex].id;
				// 	if (this.typeIndex2 != -1) {
				// 		cat_id_son = this.typeList[this.typeIndex].child[this.typeIndex2].id
				// 	}
				// }
				// data.goods_cat_son_id = cat_id_son
				// data.goods_cat_id = cat_id;
				let token = (this.$db.get('userToken'));
				if (token) data.token = token
				this.$api.getMarketList(data, res => {
					if (res.status) {
						this.list = res.data;
						this.hasNextPage = res.data.length >= this.limit;
					}
				})
			},
	aiReloadHome() {
				//h5发送消息
				// #ifdef H5
				setTimeout(() => {
					this.$webUni.postMessage({
						data: {
							action: "aiReloadHome",
						},
					});
				}, 1000)
				// #endif
			},
			top_cat_tap: function(id) {
				this.typeIndex = id;
				this.get_data_list()
			}
		}
	}
</script>

<style lang="scss">
	.answer {
		margin-left: auto;
		padding: 16rpx;
		width: 70rpx;
		height: 70rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.sticky {
		width: 100%;
		// height: calc(184rpx + var(--status-bar-height));
		position: relative;
		z-index: 2;

		.statusbox {
			height: var(--status-bar-height);
		}

		.searchWrap {
			width: 100%;
			padding: 17rpx 40rpx 0;

			.searchBox {
				width: 100%;
				height: 64rpx;
				background-color: #fff;
				border-radius: 50rpx;
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.icon {
					width: 29rpx;
					height: 31.75rpx;
				}

				.search_input {
					flex: 1;
					height: 64rpx;
					padding-left: 20rpx;
					font-size: 28rpx;
					color: #333;
				}
			}
		}

		.tabWrap {
			width: 100%;
			height: 100rpx;
			padding: 0 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.item {
				font-size: 32rpx;
				color: #333;
				font-weight: 400;
				position: relative;
			}

			.typeAcitve {
				color: #863A3A;
				font-weight: bold;
			}

			.typeAcitve::after {
				display: block;
				clear: both;
				content: '';
				width: 68%;
				height: 7rpx;
				background: linear-gradient(308deg, #FE0058 0%, #FF5B6C 100%);
				border-radius: 100rpx;
				position: absolute;
				left: 50%;
				bottom: -10rpx;
				transform: translateX(-50%);
				z-index: 2;
			}
		}

		.scrollWrap {
			width: 100%;
			height: 88rpx;
			padding: 0 40rpx;
			color: #ffffff;
			box-sizing: border-box;
			white-space: nowrap;

			.list {
				height: 100%;
				display: flex;
				align-items: center;

				.item {
					font-size: 32rpx;
					color: #ffffff;
					font-weight: 400;
					margin-right: 46rpx;
				}

				.selected {
					color: rgba(163, 182, 101, 1);
					font-weight: bold;
				}

				.selected_more {
					color: #9780ff;
					font-weight: bold;
				}
			}
		}
	}

	.shop {
		width: 100%;
		padding: 0 40rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 20rpx;
		padding-bottom: 40rpx;

		.item {
			width: 48%;
			height: 460rpx;
			background-color: #fff;
			border-radius: 20rpx;
			position: relative;
			margin-top: 20rpx;
			box-shadow: 0rpx 9rpx 18rpx 0rpx rgba(156, 156, 156, 0.6);

			.cover {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
				overflow: hidden;
				position: relative;

				&>image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			.work-time {
				z-index: 1;
				position: relative;
				border-radius: 10rpx;
				position: absolute;
				left: 10rpx;
				top: 10rpx;
				font-size: 22rpx;
				font-weight: bold;
				padding: 18rpx;
			}

			.info {
				z-index: 1;
				position: relative;
				border-radius: 10rpx;
				position: absolute;
				left: 10rpx;
				right: 10rpx;
				bottom: 10rpx;

				.title {
					margin: 10rpx;
					font-size: 26rpx;
					font-weight: bold;
					color: #ffffff;
					border-bottom: 1px solid #ffffff;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.black-info {
					margin: 10rpx;
					font-size: 22rpx;
					color: #ffffff;
				}

				.white-info {
					margin-left: 10rpx;
					margin-top: 10rpx;
					font-size: 22rpx;
					color: #ffffff;
				}

				.data {
					margin: 10rpx 0 3rpx;

					.label {
						//background: #a3b665;
						width: 80rpx;
					}

					.num {
						//background: rgb(113, 144, 54);
						color: #ffffff;
					}
				}

				.black-price {
					background-color: rgba(0, 0, 0, 0.3);
					backdrop-filter: blur(20px);
				}

				.white-price {
					background: white;
				}

				.price {
					margin-top: 10rpx;
					padding: 10rpx 14rpx;
					border-radius: 10rpx;
					text-align: left;

					text {
						font-size: 30rpx;
						color: #141519;
						font-weight: bold;
					}

					text.unit {
						font-size: 14rpx;
						font-weight: 300;
					}
				}

				.price1 {
					text-align: left;

					text {
						font-size: 32rpx;
						color: #ffffff;
						font-weight: bold;
					}

					text.unit {
						font-size: 24rpx;
					}
				}
			}

			.info_white {
				color: #000000 !important;
				background-color: #ffffff;
				border-radius: 20rpx;

				.black-info {
					color: #000000 !important;
				}

				.title {
					color: #000000 !important;
					border-bottom: 1px solid #ffffff;
				}

				.white-info {
					color: #000000 !important;
				}

				.price {
					text {
						color: #000000 !important;
					}
				}
			}

			.info_black {
				color: white !important;
				background-color: rgba(0, 0, 0, 0.3);
				backdrop-filter: blur(20px);
			}

			.out {
				width: 150rpx;
				height: 150rpx;
				display: block;
				position: absolute;
				right: -5rpx;
				bottom: -5rpx;
				z-index: 2;
			}
		}

		&>view:nth-child(-n+2) {
			margin-top: 0;
		}
	}

	// .filter_box {
	// 	width: 100%;
	// 	height: 88rpx;
	// 	padding: 30rpx;
	// 	display: flex;
	// 	align-items: center;
	// 	.filter_item {
	// 		width: 112rpx;
	// 		height: 51rpx;
	// 		background: #eeeeee;
	// 		border-radius: 6rpx 6rpx 6rpx 6rpx;
	// 		opacity: 1;
	// 		display: flex;
	// 		align-items: center;
	// 		justify-content: center;
	// 		font-size: 24rpx;
	// 		color: #333;
	// 		margin-right: 20rpx;
	// 	}
	// }
</style>

<style lang="scss">
	@import "@/pages/index/detail.scss";
</style>